<template>
  <div id="teamAddPage">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.name"
            name="name"
            label="队伍名"
            placeholder="请输入队伍名"
            :rules="[{ required: true, message: '请输入队伍名' }]"
        />

        <van-field name="uploader" label="选择头像">
          <template #input>
            <!--限制上传个数-->
            <van-uploader type="file" v-model="fileList" @change="onFileChange" name="file" multiple :max-count="1" />
          </template>
        </van-field>


        <van-field
            v-model="addTeamData.description"
            rows="4"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="请输入队伍描述"
        />

        <van-field
            v-model="addTeamData.expireTime"
            is-link
            readonly
            name="calendar"
            label="过期时间"
            placeholder="点击选择过期时间"
            @click="showPicker = true"
        />
        <van-calendar v-model:show="showPicker" @confirm="onConfirm" />

        <van-field name="stepper" label="最大人数">
          <template #input>
            <van-stepper v-model="addTeamData.maxNum" max="10" min="3"/>
          </template>
        </van-field>
        <van-field name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="addTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="Number(addTeamData.status) === 2"
            v-model="addTeamData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入队伍密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router';
import {ref} from 'vue';
import myAxios from '../../plugins/myAxios';
import {Toast} from 'vant';

const fileList = ref([]);

const router = useRouter();
// 展示日期选择器
const showPicker = ref(false);

const initFormData = {
  "name": "",
  "description": "",
  "expireTime": null,
  "maxNum": 3,
  "password": "",
  "status": 0,
}

// 需要用户填写的表单数据
const addTeamData = ref({...initFormData})


const onConfirm = (date) => {
  let month = String(date.getMonth() + 1).padStart(2, '0');
  let day = String(date.getDate()).padStart(2, '0');
  let year = date.getFullYear();

  // 直接设置日期字符串，不需要JSON.parse
  addTeamData.value.expireTime = `${year}-${month}-${day}`;
  showPicker.value = false;
};

// 初始化一个空的 FormData 对象
const formData = ref(new FormData());

// 监听文件输入的变化
const onFileChange = (e: { target: { files: any[]; }; }) => {
  const file = e.target.files[0];
  if (file) {
    formData.value.append('file', file);
  }
};

// 提交
const onSubmit = async () => {

  // 将 addTeamData 的数据添加到 formData 中
  for (const [key, value] of Object.entries(addTeamData.value)) {
    // 注意：对于非字符串类型的值，可能需要转换为字符串
    // 例如，日期对象可能需要格式化
    // 如果 expireTime 是 Date 对象，需要转换为字符串
    formData.value.append(key, String(value));
  }

  // 发送请求
  const res = await myAxios.post("/team/add", formData.value);
  if (res?.code === 0 && res.data) {
    Toast.success('添加成功');
    router.push({
      path: '/team',
      replace: true,
    });
  } else {
    Toast.fail('添加失败');
  }
}

</script>


<style scoped>
#teamPage {

}
</style>
